---
title: "最大宽度"
# description: "Utilities for setting the maximum width of an element"
description: "用来设置元素最大宽度的功能类"
---

import plugin from 'tailwindcss/lib/plugins/maxWidth'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'
import { numbersFirst } from '@/utils/sortClasses'

export const classes = {
  plugin,
  sort: numbersFirst,
}

## 使用方法

<!-- Set the maximum width of an element using the `max-w-{size}` utilities. -->
使用 `max-w-{size}` 功能类设置元素的最大宽度。

```html emerald
<template preview>
  <div class="max-w-md mx-auto rounded-md bg-emerald-500 text-white text-2xl font-extrabold flex items-center justify-center py-3">
    max-w-md
  </div>
</template>

<div class="**max-w-md** mx-auto ...">
  max-w-md
</div>
```

## Prose

<!-- We added a new max-width by default called `max-w-prose`. If you are familiar with the [typography plugin](https://github.com/tailwindlabs/tailwindcss-typography) you might recognize this one. The idea behind this class is that it allows you to have an optimal reading width. -->
我们默认增加了一个新的最大宽度，叫做 `max-w-prose`。如果您熟悉 [排版插件](https://github.com/tailwindlabs/tailwindcss-typography)，您可能会认识这个。这个类背后的想法是，它允许您有一个最佳的阅读宽度。

```html purple
<template preview>
  <div class="max-w-prose text-sm text-purple-700 p-6">
    <p class="font-bold">Why do you never see elephants hiding in trees?</p>
    <p>Because they're so good at it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</p>
  </div>
</template>

<div class="**max-w-prose** ...">
  <p class="font-bold">Why do you never see elephants hiding in trees?</p>
  <p>Because they're so good at it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</p>
</div>
```

---

<!-- ## Responsive -->
## 响应式

<!-- To control the max-width of an element at a specific breakpoint, add a `{screen}:` prefix to any existing max-width utility. -->
要在特定的断点处控制元素的最大宽度，请在任何现有的最大宽度功能类前添加 `{screen}:` 前缀。

```html
<div class="max-w-sm **md:max-w-lg** ...">
  <!-- ... -->
</div>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看 [响应式设计](/docs/responsive-design) 文档。

---

## 定制

### Max-Width Scale

<!-- Customize Tailwind's default max-width scale in the `theme.maxWidth` section of your `tailwind.config.js` file. -->
在您的 `tailwind.config.js` 文件的 `theme.maxWidth` 部分定制 Tailwind 的默认最大宽度。

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      maxWidth: {
+       '1/4': '25%',
+       '1/2': '50%',
+       '3/4': '75%',
      }
    }
  }
```

<!-- Learn more about customizing the default theme in the [theme customization documentation](/docs/theme#customizing-the-default-theme). -->
在 [主题自定义文档](/docs/theme#customizing-the-default-theme) 中了解更多关于自定义默认主题的信息。

### 变体

<Variants plugin="maxWidth" name="max-width" />

### 禁用

<Disabling plugin="maxWidth" name="max-width" />
